import i18n from '@app-cad/common/utils/i18next';
import { NMTopoBaseCommand } from '@app-cad/environments/nextmesh/types/command';
import CmdInteractor from './CmdInteractor';
import { useEffect, useRef, useState } from 'react';
import { CommandDialog } from '@amcax/base';
import { Radio } from 'antd';
import { MsComponent } from '../cmd-common/component';
import {
  coordinateParam,
  extraUiSchema,
  insert,
  mouseParam,
  parametricParam,
} from '../cmd-common/insert-data';
import './style.scss';
interface PointCommandProps {
  title: string;
  onClose: () => void;
}
const modeSelect = [
  { label: '鼠标', value: 'mouse' },
  { label: '坐标', value: 'coordinate' },
  { label: '参数化', value: 'parametric' },
];
function PtCommand({ onClose, title }: PointCommandProps) {
  const [mode, setMode] = useState<'mouse' | 'coordinate' | 'parametric'>(
    'mouse',
  );
  const [pointInfo, setPointInfo] = useState<any>({ point: [0, 0, 0] });
  const cmdRef = useRef<CmdInteractor>(null);
  useEffect(() => {
    cmdRef.current = new CmdInteractor(setPointInfo);
    cmdRef.current.addExit(onClose);
    return () => {
      cmdRef.current?.destroy();
      cmdRef.current = null;
    };
  }, []);
  return (
    <CommandDialog
      title={title}
      onClose={onClose}
      placement='topLeft'
    >
      <Radio.Group
        buttonStyle='solid'
        value={mode}
        className='px-5 w-full'
        onChange={(e) => {
          if (e.target.value === 'mouse') {
            cmdRef.current?.setMode(['face', 'line', 'point']);
          } else if (e.target.value === 'coordinate') {
            cmdRef.current?.setMode(['none']);
          } else if (e.target.value === 'parametric') {
            cmdRef.current?.setMode(['lineLength']);
          }
          setMode(e.target.value);
          setPointInfo({ point: [0], parent: null, len: 0 });
        }}
      >
        {modeSelect.map((v) => (
          <Radio.Button
            className='w-1/3 text-center'
            value={v.value}
          >
            {v.label}
          </Radio.Button>
        ))}
      </Radio.Group>
      {mode === 'mouse' && (
        <MsComponent
          onClose={onClose}
          formatParam={mouseParam}
          formParams={{
            schemaParams: insert.mouse,
            extraUiSchema: extraUiSchema.mouse,
          }}
          pointInfo={{
            ...pointInfo,
            param: pointInfo?.point?.map((v) => v.toFixed(2)),
          }}
          wsApi={'insertPoint'}
          cmdCommand={'insert'}
          callback={() => {
            setPointInfo({ point: [0, 0, 0], parent: '', len: 0 });
          }}
        />
      )}
      {mode === 'coordinate' && (
        <MsComponent
          onClose={onClose}
          formatParam={coordinateParam}
          formParams={{
            schemaParams: insert.coordinate,
            extraUiSchema: extraUiSchema.coordinate,
          }}
          wsApi={'insertPoint'}
          cmdCommand={'insert'}
          callback={onClose}
        />
      )}
      {mode === 'parametric' && (
        <MsComponent
          onClose={onClose}
          formatParam={(data) =>
            parametricParam({ ...data, entityId: pointInfo.entityId })
          }
          formParams={{
            schemaParams: insert.parametric,
            extraUiSchema: extraUiSchema.parametric,
          }}
          wsApi={'insertPoint'}
          cmdCommand={'insert'}
          callback={onClose}
        />
      )}
    </CommandDialog>
  );
}
export const cmdPointInsert: NMTopoBaseCommand = {
  id: 'CmdPointInsert',
  label: 'command.topo.point-insert',
  icon: 'commands/curved/point',
  create: function (label: string, onClose: () => void) {
    return (
      <PtCommand
        title={i18n.t(label)}
        onClose={onClose}
      />
    );
  },
};
